<template>
  <!-- <el-button text @click="addPhone">
    click to open the Dialog
  </el-button> -->

  <div class="outBox">
    <div class="side">

      <el-menu default-active="2" class="el-menu-vertical-demo">
        <!-- <el-menu-item index="1">
          <el-icon><icon-menu /></el-icon>
          <span>首页</span>
        </el-menu-item> -->

        <el-menu-item @click="$router.push({ path: '/admin/user' })" index="1">
          <el-icon><icon-menu /></el-icon>
          <span>用户管理</span>
        </el-menu-item>

        <el-menu-item @click="$router.push({ path: '/admin/order' })" index="2">
          <el-icon><icon-menu /></el-icon>
          <span>订单管理</span>
        </el-menu-item>

        <el-menu-item @click="$router.push({ path: '/admin/phone' })" index="3">
          <el-icon><icon-menu /></el-icon>
          <span>手机管理</span>
        </el-menu-item>



      </el-menu>

    </div>
    <div class="main">
      <div class="header">
        <div>
          <img style="height: 100px;" src="../../imgs/back.jpg" alt="">
        </div>
        <div class="admin">
          <el-dropdown>
          <span class="el-dropdown-link">
            {{ '欢迎管理员' + store.getUser().value.userName }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="$router.push({path:'/login'})">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        </div>

      </div>
      <div class="body">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getInfoChildrenByPid } from '../api/info'
import { getColors } from '../api/color'
import { savePhone } from '../api/phone'

import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'
import { useRouter } from 'vue-router'

import { useUserStore } from '@/stores/counter'

const store = useUserStore()
const router = useRouter()
const step = ref(0)

const dialogVisible = ref(false)

const brands = ref()

const types = ref()

const colors = ref()

const labelPosition = ref('right')

const phoneInfo = reactive({
  brandId: '',
  typeId: '',
  phoneName: '',
  memory: '',
  disk: '',
  price: 0,
  colorId: '',
  coverSrc: ''
})


const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  console.log(response);
  phoneInfo.coverSrc = response.data

}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}





const next = () => {
  step.value++



  if (step.value === 1) {
    // types = PID = brandID
    console.log(phoneInfo.brandId);

    getInfoChildrenByPid(phoneInfo.brandId as string).then(res => {
      types.value = res.data.data
    })

    getColors().then(res => {
      colors.value = res.data.data
    })
  }

  if (step.value === 3) {
    // commit 
    console.log(phoneInfo);
    savePhone(phoneInfo).then(res => {
      dialogVisible.value = false
      step.value = 0;
    })

  }
}

const addPhone = () => {
  getInfoChildrenByPid(0).then(res => {
    brands.value = res.data.data
  })
  dialogVisible.value = true
}
</script>

<style scoped >
.outBox {
  height: 100%;
  display: flex;
}

.header {
  height: 100px;
  display: flex;
  justify-content:space-between;
}
.admin{
  margin-top: 30px;
  width: 70px;
  background-color: rgb(219, 219, 219);
  border-radius: 10px;
  align-items: center;
  height: 32px;
}

.side {
  width: 250px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>